<template>
	<view class="container" v-if="!isLoading">
		<view class="box"
			style="background-image: url('https://i.antiedu.tech/static/background/result1.png');background-size: 100% 100%;">


			<view class="info">


				<view class="name">
					{{detail.name}}
				</view>
				<view class="title-box">
					
					<view class="title">{{detail.book_name}}</view>
					<view class="choose">({{detail.start_num}}-{{detail.end_num}})</view>
				</view>
			
				<view class="type">{{detail.type_text}}</view>
				<view class="num">{{detail.choose_num}}</view>
				<view class="info-result">
					<view class="result" v-if="detail.status==1">
						<view style="display: flex;justify-content: center;">
							<view class="circle">{{detail.score}}%</view>
						</view>
						<view style="height: 20rpx;line-height: 20rpx;">恭喜您通过考试</view>
					</view>
					<view class="result-fail" v-if="detail.status==2">
						<view style="display: flex;justify-content: center;">
							<view class="circle-fail">{{detail.score}}%</view>
						</view>
						<view style="height: 40rpx;line-height: 40rpx;">很遗憾您未通过考试</view>
					</view>
				</view>
			</view>

			

			<view class="save-xc">
				<view class="btn" @click="toSave">
					保存到手机相册
				</view>
			</view>

			<view class="foot">
				<view class="again" @click="toAgain">
					再测一次
				</view>
				<view class="fuxi" @click="toFuxi">
					考试详情
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import * as PaperApi from '@/api/ant/paper'
	import * as BookApi from '@/api/ant/book'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'



	export default {
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin],
		data() {
			return {
				paperId: 0,
				detail: {},
				isLoading: true,
				height:843


			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {

			this.paperId = options.paperId
			this.getPaperDetail()
			uni.getSystemInfo({
				success: res => {
					console.log(res);
					console.log(res.screenHeight); //屏幕高度
					console.log(res.screenWidth); //屏幕宽度
					console.log(res.windowHeight); //可操作页面高度
					console.log(res.windowWidth); //可操作页面宽度
					this.height = res.windowHeight
				}
			})

		},

		methods: {


			getPaperDetail() {
				const app = this
				app.isLoading = true

				PaperApi.detail(app.paperId)
					.then(result => {
						app.detail = result.data.detail
						app.duration = result.data.detail.time
						app.timu_title = result.data.detail.timu[0].name

					})
					.finally(() => app.isLoading = false)
			},

			toSave() {

				PaperApi.getPoster(this.paperId)
					.then(result => {
						console.log(result)


						uni.downloadFile({
							url: result.data.imageUrl, //仅为示例，并非真实的资源
							success: (res) => {
								if (res.statusCode === 200) {
									let file = res.tempFilePath;
									uni.saveImageToPhotosAlbum({
										filePath: file,
										success: () => {
											uni.hideLoading();
											uni.showToast({
												title: "已保存至相册",
												duration: 3000
											});
										},
										fail: () => {
											uni.hideLoading();
											uni.showToast({
												title: "图片保存失败",
												duration: 3000
											});
										}
									});
								}
							}
						});

					})







			},

			toFuxi() {
				uni.navigateTo({
					url: '/pages/ant/exam/fuxi?paperId=' + this.paperId
				})
			},

			toAgain() {

				let app = this
				if (app.disabled) {
					return false
				}
				app.disabled = true

				BookApi.add_paper_again({
						paper_id: app.detail.paper_id
					})
					.then(result => {

						uni.redirectTo({
							url: '/pages/ant/exam/index?paperId=' + result.data.paper_id
						})


					}).finally(() => app.disabled = false)

			}




		}
	}
</script>

<style lang="scss" scoped>
	.save-xc {
		position: relative;
		top: 500rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.btn {
		width: 60%;
		height: 80rpx;
		border-radius: 60rpx;
		background: linear-gradient(180deg, rgba(22, 132, 252, 1) 0%, rgba(100, 174, 255, 1) 100%);
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}

	.foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		font-size: 32rpx;
	}

	.again {
		width: 50%;
		height: 100rpx;

		border-top-left-radius: 60rpx;
		border-bottom-left-radius: 60rpx;
		background: #E1EFFF;
		color: #1684FC;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fuxi {
		width: 50%;
		height: 100rpx;
		border-top-right-radius: 60rpx;
		border-bottom-right-radius: 60rpx;
		background: linear-gradient(180deg, rgba(22, 132, 252, 1) 0%, rgba(100, 174, 255, 1) 100%);
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		height: 100vh;
		width: 100%;
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		background-color: #71b5fa;
	

	}

	.box {
		height: 1150rpx;
		
	}

	.info {
		position: relative;
		 // background-color: #1684FC;
		left: 350rpx;
		top: 480rpx;
		font-size: 32rpx;
		width: 40%;
		height: 540rpx;
		line-height: 90rpx;
	}

	.name {
	
		text-align: center;
		line-height: 90rpx;
		height: 90rpx;

		font-weight: bold;
	}
	.title-box{
		height: 110rpx;
	}

	.title {
	
		text-align: center;
		line-height: 100rpx;
		height: 80rpx;

		font-size: 24rpx;
		font-weight: bold;
	}

	.choose {
		
		text-align: center;
		font-size: 24rpx;
		line-height: 20rpx;
		height: 20rpx;
		font-weight: bold;

	}

	.type {
	
		text-align: center;
		line-height: 120rpx;
		height: 120rpx;
		font-weight: bold;
	}

	.num {
		position: relative;
		text-align: center;
		line-height: 100rpx;
		height: 100rpx;
		font-weight: bold;
	}

	.info-result {

		// background-color: #1684FC;

		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: center;

		width: 100%;

	}


	.result {
		position: relative;
		text-align: center;

		color: #28BD0D;
		font-size: 18rpx;
	}

	.circle {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		border: solid 1rpx #28BD0D;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.result-fail {
		position: relative;
		text-align: center;


		color: #FF0000;
		font-size: 24rpx;
	}

	.circle-fail {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		border: solid 1rpx #FF0000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>